<template>
  <div class="app-container">

    <el-tabs type="border-card">
      <el-tab-pane label="渠道测试">
        <el-form :model="form" ref="form" size="small"   label-width="85px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="手机号" prop="mobile">
                <el-input v-model="form.mobile" placeholder="请输入手机号" style="width: 90%"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="渠道选择" prop="channel">
                <el-radio v-model="form.channelChoose" label="RANDOM" border>随机可用</el-radio>
                <el-radio v-model="form.channelChoose" label="APPOINT" border>指定渠道</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="短信渠道" prop="channel">
                <el-select v-model="form.channelCode" placeholder="请选择短信渠道" clearable @change="channelChange">
                  <el-option
                    v-for="channel in channelList"
                    :key="channel.channelCode"
                    :label="channel.channelName"
                    :value="channel.channelCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="短信模板" prop="channel">
                <el-select v-model="form.tmplId" placeholder="请选择短信模板" clearable @change="channelTmpl">
                  <el-option
                    v-for="tmpl in tmplList"
                    :key="tmpl.id"
                    :label="tmpl.tmplName"
                    :value="tmpl.id"
                  >
                    <span style="float: left">{{ tmpl.tmplName }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">
                  <dict-tag :options="dict.type.cms_sms_tmpl_type" :value="tmpl.tmplType"/>
                </span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="模板参数" prop="tmplParams" v-if="tmplParams.length > 0">
            <el-row v-for="(item , idx) in tmplParams" :key="idx" style="margin-bottom: 5px">
              <el-col :span="11">
                <el-form-item label="参数名：" >
                  <el-input v-model="tmplParamsArr[parseInt(idx)].code"  disabled  style="width: 90%"/>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="参数值：" >
                  <el-input v-model="tmplParamsArr[parseInt(idx)].value" placeholder="请输入参数值" style="width: 90%"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item label="验证码字段" prop="verifyCodeName" v-if="currentTmpl.tmplType == 'VERIFY_CODE'">
            <el-input v-model="form.verifyCodeName" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="submitTest">提交测试</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="开发测试">
        <p>注意：</p>
        <p>1：该模块下的测试用例，都是在程序中写死的逻辑</p>
        <p>2：属于开发阶段测试保留下来的逻辑，只针对开发人员</p>
        <p>3：开发人员如果想要测试，请自行修改代码逻辑</p>
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="_sendLogin"
        >发送普通短信</el-button>

        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="_sendVerify"
        >发送验证码短信</el-button>

        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="_testLua"
        >测试lua脚本</el-button>



        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="_testNotRepeat"
        >测试防重复提交</el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { send,sendLoion, sendVerify, testLua,testNotRepeat } from '@/api/cms/sms/test'
import {  listChannelAll } from '@/api/cms/sms/channel'
import { listTemplateAll,getTemplate } from '@/api/cms/sms/template'

export default {
  name: 'SmsTest',
  dicts: ['cms_sms_tmpl_type'],
  data() {
    return {
      channelList:[],
      tmplList:[],
      form:{
        mobile: '',
        channelCode: '',
        channelChoose: 'RANDOM',
        tmplId: undefined,
        params: [],
        verifyCodeName: 'code'
      },
      tmplParamsArr: [],
      currentTmpl: {}
    }
  },
  computed: {

    tmplParams() {
      console.log('来计算');
      var reg = /\$\{(.+?)\}/g;
      var list = [];
      var result = null;
      do {
        result = reg.exec(this.currentTmpl.tmplContent);
        if (result){
          let obj = {
            code: result[1],
            value: this.loadDesp(result[1])
          }
          list.push(obj)
        }
      } while (result)
      console.log(list)
      this.tmplParamsArr = [...list]
      return list;
    },
  },
  created() {
    this._listChannelAll();
  },
  methods: {
    loadDesp(code){
      let lnt = this.tmplParamsArr.length;
      if (lnt>0){
        for (let i = 0 ;i< lnt ;i++){
          let item = this.tmplParamsArr[i];
          if (item.code == code){
            return item.desp
          }
        }
      }
      return  "";
    },
    _listChannelAll() {
      listChannelAll().then(response => {
        this.channelList = response.data
      })
    },
    _listTmplListAll(channelCode) {
      listTemplateAll(channelCode).then(response => {
        this.tmplList = response.data
      })
    },
    channelChange(val){
      this._listTmplListAll(val)
    },
    channelTmpl(val){
      getTemplate(val).then(response => {
        this.currentTmpl = response.data
      })
    },
    submitTest(){
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.params = this.tmplParamsArr;
          send(this.form).then(response => {
            let res = response.data;
            this.$modal.msgSuccess(res.errMsg)
          });
        }
      });
    },
    _sendLogin() {
      sendLoion().then(response => {
        this.$modal.msgSuccess('发送成功')
      })
    },
    _sendVerify() {
      sendVerify().then(response => {
        this.$modal.msgSuccess('发送成功')
      })
    },
    _testLua() {
      testLua().then(response => {
        this.$modal.msgSuccess('发送成功')
      })
    },

    _testNotRepeat(){
      testNotRepeat().then(response => {
        this.$modal.msgSuccess(response.msg)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card {
  margin-top: 40px;
}
</style>
